<template>
  <el-table
    :data="tableData"
    border
    ref="singleTable"
    :highlight-current-row="highlightCurrentRow"
    @current-change="handleCurrentChange"
    @selection-change="handleSelectionChange"
    :row-class-name="tableRowClassName"
    @select="handleSelect"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  >
    <el-table-column
      type="selection"
      width="55"
      v-if="typeCheckbox"
      >
    </el-table-column>
    <template v-for="(item,index) in tableTitle">
      <!-- //普通显示 -->
      <el-table-column :width="item.width" v-if="item.type == 1" :prop="item.prop" :label="item.name" :key="index">
        <template slot-scope="scope">
          <div>{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>
      <!-- 复选框 -->
      <el-table-column :width="item.width" v-if="item.type == 3" :prop="item.prop" :label="item.name" :key="index">
        <template slot-scope="scope">
          <el-checkbox v-if="item.type == 3" v-model="scope.row[item.prop]"
                       :checke="scope.row[item.prop]"></el-checkbox>
          <div v-if="item.type != 3">{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>
      <!-- 操作按钮 -->
      <el-table-column :width="item.width" :fixed="item.fixed" v-if="item.type == 4" :prop="item.prop" label="操作"
                       :key="index">
        <template slot-scope="scope">
            <el-button
            size="mini"
            @click="handleEdit(it.number ,scope.row)" 
            v-for='(it) in item.arr' 
            :key="it.number"
            v-show="it.number == 1 && scope.row.skin_test == 1 ? false : true"  
            :type="it.type">
            <!-- {{ it.flag != 2 ? it.name : scope.row.status == 1 ? '禁用' : '启用' }} -->
            {{it.name}}
          </el-button>
        </template>
      </el-table-column>
      <!-- select操作按钮 -->
      <el-table-column :width="item.width" :fixed="item.fixed" v-if="item.type == 8" :prop="item.prop" label="操作"
                       :key="index">
        <template slot-scope="scope">
          <el-dropdown size="primary" @command="handleCommand($event,scope.row)">
            <el-button type="primary" size="mini">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item) in item.arr" :command="item.value" :key="item.value">{{ item.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <!-- 状态按钮 -->
      <el-table-column :width="item.width" v-if="item.type == 5" :prop="item.prop" :label="item.name" :key="index">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.flag"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="handleSwitchChange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
<!--      tag 展示-->
      <el-table-column :width="item.width" v-if="item.type == 6" :prop="item.prop" :label="item.name" :key="index">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row[item.prop] === '成功' ? 'success' : 'danger'"
            disable-transitions>{{ scope.row[item.prop] }}
          </el-tag>
        </template>
      </el-table-column>
    </template>
  </el-table>
  
</template>

<script>
export default {
   name:"fromList",
   data(){
     return {
      value:"",
      activity:0
     }
   },
   created(){
   },
   mounted(){
   },
  //  props:["tableTitle","tableData","checkbox"],
  props: {
    tableTitle: {
      type: Array,
      default: ''
    },
    tableData: {
      type: Array,
      default: ''
    },  
    checkbox: {
      type: Boolean,
      default: false
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false,
    },
    typeCheckbox:{
      type:Boolean,
      default:false
    },
    activityInfo:{
      type:Number,
      default:0
    }
  },
  
  methods: {
    handleSelect(row,index){
       console.log(row)
       console.log(index)
       console.log("值")
    },
    tableRowClassName({row, rowIndex}) {
      if(this.activityInfo == rowIndex){
          return `success-row`
      }
      // if(this.activityFlag){
      //   if(this.colorFlag){
      //     return `status-${row.status}`
      //   }else{
      //        
      //   }
      // }
    },
    indexMethod(index) {
      return (index + 1) * 1;
    },
    handleSelectionChange(e) {
      this.$emit("handelChange", e)
    },
    //  点击单选选中数据
    handleCurrentChange(e) {
      this.$emit("handleCurrentChange", e)
    },
    handleEdit(e, data) {
      this.$emit("handleEdit", {key: e, data: data})
    },
    handleSwitchChange(data) {
      this.$emit("handleSwitchChange", {data: data})
    },

    handleDelete(e, data) {
      this.$emit("handleDelete", {key: e, data: data})
    },
    handleCommand(e, q) {
      this.$emit("handleCommand", {key: e, data: q})
    },

  }
}
</script>

<style lang="scss">
.success-row {
  background: #409EFF !important;
}
.button {
  background: #000000;
  color: #fff;
}

</style>
